<template>
  <div>
    <Table border :columns="columns12" :data="roleList">
      <template slot-scope="{ row }" slot="masterName">
        <span >{{ row.masterName }}</span>
     </template>
     <template slot-scope="{ row, index }" slot="remark">
       <input type="number"  class="numberInput" v-model="remark" v-if="show == index" />
       <span v-else>{{ row.remark }}</span>
     </template>
      <template slot-scope="{ row,index }" slot="action">
        <div v-if="show === index">
          <Button style="margin-right:5px;" @click="handleSave(row,index)">保存</Button>
          <Button style="margin-right:5px;" @click="show = -1">取消</Button>
        </div>
        <div v-else>
          <Button @click="handleEdit(row, index)">编辑</Button>
        </div>
        </template>
    </Table>
    <p style="margin-top:10px;">备注：比例值是指返还比例，例如积分比例为200时，表示充值100元将获得100*200%=200积分。</p>
  </div>
</template>
<script>
import { dictSave, dictQuery } from "@/api/data";
export default {
  name: "Account",
  data() {
    return {
      roleList: [],
      show: -1,
      // 条件
      condition: {
        pageNum: 1,
        pageSize: 10
      },
      columns12: [
        // {
        //   type: "index",
        //   width: 60,
        //   align: "center",
        //   key: ""
        // },
        {
          title: "名称",
          key: "masterName"
        },
        {
          title: "比例值",
          key: "remark",
          slot: 'remark'
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center"
        }
      ],
      remark:''
    };
  },
  mounted() {
    this.ListRole();
  },
  methods: {
     handleEdit (row, index) {
        this.remark = row.remark;
        this.show = index;

      },
      handleSave (row,index) {
        // this.data[index].name = this.editName;
        // this.data[index].age = this.editAge;
        // this.data[index].birthday = this.editBirthday;
        this.roleList[index].remark=this.remark
        dictSave({id:row.id,masterCode:row.masterCode,masterName:row.masterName,remark:this.remark,state:row.state}).then(res => {
          if (res.code==1) {
          this.remark=''
          }
        });
        this.show = -1;
      },
    blur(input,row) {
    },
    ListRole() {
      this.roleList = [];
      // 积分
      dictQuery({ masterCode: "point_ratio" }).then(res => {
        if (res.code==1) {
        res.data.state=1
        this.$set(this.roleList,0,res.data)
        this.roleList[0]=res.data
        }
      });
      // 点金券
      dictQuery({ masterCode: "coupon_ratio" }).then(res => {
        if (res.code==1) {
        res.data.state=1
        this.$set(this.roleList,1,res.data)
        }
      });
    }
  }
};
</script>
